<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view @tap.stop="closeOutside">
    <z-paging
      ref="paging"
      v-model="dataList"
      @query="queryList"
      :show-loading-more-when-reload="true"
      height="100%"
      use-page-scroll
    >
      <view :index="item.id" v-for="item in dataList" :key="item.id">
        <wd-swipe-action>
          <CouponCard :item="item" />
          <template #right>
            <view class="action">
              <view class="button" style="background: #ff2c3c" @tap="handleCoupon(item.id)">
                兑换券
              </view>
            </view>
          </template>
        </wd-swipe-action>
      </view>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref, shallowRef } from 'vue'
import { receiveCouponUsingPost, listUsingGet } from '@/api/couponController'
import CouponCard from './coupon-card.vue'
import { useToast, useQueue } from 'wot-design-uni'
import { AjaxResultPageResultyouhuiquanliebiaoVo } from '@/api/types'
import { useUserStore } from '@/store'
const { closeOutside } = useQueue()
const toast = useToast()
const paging = shallowRef<any>(null)
const dataList = ref([])
const userStore = useUserStore()

const queryList = async (pageNo: number, pageSize: number) => {
  try {
    const res: AjaxResultPageResultyouhuiquanliebiaoVo = await listUsingGet({
      params: { page_no: pageNo, page_size: pageSize },
    })
    const data = res.data
    paging.value.complete(data.lists)
  } catch (error) {
    paging.value.complete(false)
  }
}

const handleCoupon = async (couponId: number) => {
  const res = await receiveCouponUsingPost({ body: { id: couponId } })
  toast.show(res.msg)
}
</script>

<style scoped lang="scss">
.action {
  height: 100%;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100%;
  padding: 0 11px;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
}
</style>
